<template>
    <div class="page">
        <div class="white-thems relative">
            <app-search>
                <a slot="left" href="javascript:;" class="go-back" @click="back"></a>
                <a slot="right" href="javascript:;" class="pro-display" :class="'icons-' + listType" @click.self="switchViewType"></a>
            </app-search>
        </div>
        <div class="filter-bar">
            <ul class="flexbox items-center justify-center">
                <li :class="{'current':sortIndex=='zh'}">
                    <span @click="selectZH('zh')">综合</span>
                </li>
                <li :class="{'current':sortIndex=='xl'}">
                    <span @click="selectXL('xl')">销量</span>
                </li>
                <li :class="{'current':sortIndex=='jg'}">
                    <span @click="selectPrice('jg',(priceSort=='arrow-down') ? 'arrow-up' : 'arrow-down')">价格
                        <i class="price-sort" :class="priceSort"></i>
                    </span>
                </li>
                <li :class="{'current':sortIndex=='sx'}">
                    <span @click.self="selectSX('sx')">筛选
                        <i class="sx-sort"></i>
                    </span>
                    <div v-if="showFilterBlock" class="filtrate-block">
                        <div class="filtrate-content">
                            <h2>价格区间：</h2>
                            <div class="flexbox items-center justify-center">
                                <input type="number" v-model="sprice" placeholder="最低价">
                                <p class="section-line"></p>
                                <input type="number" v-model="eprice" placeholder="最高价">
                            </div>
                        </div>
                        <div class="filtrate-bottom flexbox items-center justify-center">
                            <a href="javascript:;" @click="submit">重置</a>
                            <a href="javascript:;" @click="submit">确认</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="search-list">
            <ul :class="[listType === 'larger' ? 'flexbox flex-wrap' : 'largest-list']">
                <each-list v-for="(item,index) in list" :item="item" :key="index"></each-list>
            </ul>
            <app-loading v-if="show" :end="end"></app-loading>
        </div>
        <div v-if="showBackTop" @click="toTop" class="to-top"></div>
    </div>
</template>
<script>
import mixin from "@/mixin";
import appSearch from "@/components/common/Search";
import appLoading from "@/components/common/Loading";
import eachList from "@/components/common/EachList";
export default {
  data() {
    return {
      // 筛选条件
      listType: sessionStorage.getItem("classifyListType") || "larger", // 列表类型 默认
      sortIndex: "zh",
      showFilterBlock: false,
      priceSort: "",
      sprice: "",
      eprice: "",

      // 数据
      list: [],
      page: 1, // 当前页
      show: false, // 加载状态
      flag: true, // 防止重复加载
      end: false // 分页是否全部加载
    };
  },
  mixins: [mixin],
  components: {
    appSearch,
    appLoading,
    eachList
  },
  methods: {
    // 列表显示类别
    switchViewType() {
      this.resetFilter(false, "zh", "");
      this.listType = this.listType == "larger" ? "largest" : "larger";
      sessionStorage.setItem("classifyListType", this.listType);
    },

    // 综合
    selectZH(current) {
      this.resetFilter(false, current, "");
    },

    // 销量
    selectXL(current) {
      this.resetFilter(false, current, "");
    },

    // 价格
    selectPrice(current, currentSore) {
      this.resetFilter(false, current, currentSore);
    },

    // 筛选
    selectSX(current) {
      this.resetFilter(
        !this.showFilterBlock,
        this.sortIndex === "sx" ? "" : current,
        ""
      );
    },
    resetFilter(a, b, c) {
      this.showFilterBlock = a;
      this.sortIndex = b;
      this.priceSort = c;
    },
    submit() {
      this.resetFilter(false, "zh", "");
    },
    load_classify_result() {
      this.api.get_product_list().then(response => {
        this.list = response.data.product_list;
      });
    },
    scroll() {
      // 加载分页数据(当前网页高度 <= (网页被卷进去的距离 + 文档显示区的宽度) + 500(提前加载))
      var scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      if (document.body.offsetHeight <= scrollTop + window.innerHeight + 500) {
        // 模拟加载全部分页
        if (this.page > 4) {
          this.show = true;

          // 全部加载完成
          this.end = true;

          // 终止
          return false;
        }

        // 防止重复加载
        if (this.flag) {
          // 数据返回之前 滚动禁止重复请求
          this.flag = false;

          // 显示加载动画
          this.show = true;

          // api
          this.api
            .get_product_list({
              params: {
                type: "classify_result", // 类型
                page: (this.page += 1), // 当前请求页
                pagesize: 6 // 每页返回数
              }
            })
            .then(response => {
              // 恢复滚动请求
              this.flag = true;

              // 关闭加载动画
              this.show = false;

              // 更新数组
              var items = response.data.product_list;
              items.forEach((item, index) => {
                this.list.push(item);
              });
            });
        }
      }
    }
  },
  created() {
    // 初始化数据
    this.load_classify_result();
  },
  mounted() {
    // 滚动操作
    window.addEventListener("scroll", this.scroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scroll);
  }
};
</script>
<style src="@/assets/scss/result.scss" lang="scss"></style>
